/*
 * @Author: xinyang3
 * @Date: 2021-07-20 12:01
 * @Descripttion: 插槽
 * @LastEditors: xinyang3
 * @LastEditTime: 2021-07-20 15:00
 */
const Container = {
  name: 'container',
  template: `
    <submit-button>save</submit-button>

    <base-layout>
      <template #header>
        <h1> this is a header.</h1>
      </template>
      <template v-slot:default>
        <p> this is a body area.</p>
      </template>
      <template v-slot:footer>
        <p> this is a footer.</p>
      </template>
    </base-layout>

    <todo-list>
      <template v-slot:default="scope">
      <i class="fas fa-check"></i>
      <span class="green">{{ scope.item }}</span>
      </template>
    </todo-list>
  `
};

var app = Vue.createApp(Container);

// 默认子组件
app.component('submit-button', {
  template: `
    <button type="submit">
      <slot>Submit</slot>
  </button>`
});

// 具名卡槽
app.component('base-layout', {
  template: `
  <div class="named-slots">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
});
// 作用域插槽
app.component('todo-list', {
  data() {
    return {
      items: ['Feed a cat', 'Buy milk']
    }
  },
  template: `
    <ul>
      <li v-for="(item, index) in items">
        <slot :item="item"></slot>
      </li>
    </ul>
  `
});

// 动态插槽名
`<base-layout>
<template v-slot:[dynamicSlotName]>
</template>
</base-layout>`

app.mount('#app');